<template>
  <view class="layout verify-login">
    <view class="title">请输入验证码</view>
    <view class="description">验证码已通过手机短信发送至{{ mobile }}</view>
    <view class="verify-input-box">
      <view class="verify-input-inner"><input type="number" v-model="code" placeholder="请输入验证码" /></view>
      <view :class="'verify-btn ' + (allowClick === true ? 'allowClick' : '')" v-text="text"></view>
    </view>
    <button class="login-btn" @tap="onClickVerifyLogin">完 成</button>
  </view>
</template>

<script>
import uniApp from "@/utils/uni-app";
import user from "@/api/modules/user";
let timer = null,
  time = 6;
export default {
  data() {
    return {
      mobile: "",
      code: "",
      text: "",
      allowClick: false
    };
  },
  onLoad(options) {
    this.mobile = options.mobile;
    if (!this.mobile) {
      uni.navigateTo({
        url: "/pages/common/login_v2"
      });
      return false;
    }
    this.init();
  },
  methods: {
    init() {
      // 获取验证码
      this.allowClick = false;
      user
        .sendMobileVerifyCode(this.mobile)
        .then(_ => {
          // time = _.data.lifeTime;
          time = 60;
          timer = setInterval(() => {
            time--;
            this.text = time + "s后重新获取";
            if (time < 1) {
              clearInterval(timer);
              this.allowClick = true;
              this.text = "重新获取验证码";
            }
          }, 1000);
        })
        .catch(e => {
          uniApp.alert(e.data.msg || "获取验证码失败");
        });
    },
    onClickVerifyLogin() {
      this.$store.dispatch("user/fastLogin",{ mobile: this.mobile, code: this.code })
        .then(_ => {
          uniApp.toast(_.msg || "登录成功");
          uni.reLaunch({
            url: "/pages/common/home/index"
          });
        })
        .catch(e => {
          uniApp.alert(e.message || e.data.msg || "登录失败", function() {
            uni.navigateBack();
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.verify-login {
  background-color: #ffffff;
  padding: 40upx 50upx;
  height: 100%;
  width: 100%;
  .title {
    color: #000000;
    font-size: 32upx;
  }
  .description {
    color: #656565;
    font-size: 24upx;
    line-height: 60upx;
    margin-bottom: 30upx;
  }
  .verify-input-box {
    overflow: hidden;
    background-color: #efefef;
    height: 80upx;
    border-radius: 80upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .verify-input-inner {
      height: 80upx;
      input {
        height: 80upx;
        line-height: 80upx;
        padding: 0 30upx;
      }
    }
    .verify-btn {
      background-color: #888888;
      color: #ffffff;
      width: 250upx;
      height: 80upx;
      line-height: 80upx;
      text-align: center;
      font-size: 26upx;
      border-radius: 80upx;
      &.allowClick {
        background-color: #0f86c3;
      }
    }
  }
  .login-btn {
    margin-top: 100upx;
    height: 80upx;
    line-height: 80upx;
    border-radius: 80upx;
    background-color: #ffac02;
    width: 400upx;
    box-shadow: 0 10upx 0 0 #cc7323;
  }
}
</style>
